<template>
  <div class="file-viewer-page">
    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button type="primary" link @click="handleBack">
        <el-icon><ArrowLeft /></el-icon>
        返回上一页
      </el-button>
    </div>

    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="file-title">{{ fileTitle }}</h1>
      <div class="file-meta">
        <span class="file-type">文件类型: {{ fileTypeText }}</span>
        <span class="file-size">{{ fileSize }}</span>
      </div>
    </div>

    <!-- 视频播放器区域 -->
    <div v-if="isVideo" class="video-viewer-container">
      <div class="viewer-controls">
        <el-button size="small" @click="downloadFile">
          <el-icon><Download /></el-icon> 下载视频
        </el-button>
        <el-button size="small" @click="reloadVideo">
          <el-icon><Refresh /></el-icon> 重新加载
        </el-button>
      </div>

      <div class="viewer-content">
        <!-- 加载中提示 -->
        <div v-if="loading" class="loading-overlay">
          <el-icon class="loading-icon"><Loading /></el-icon>
          <span>视频加载中...</span>
        </div>

        <!-- 错误提示 -->
        <div v-if="error" class="error-message">
          <el-alert type="error" :title="error" show-icon />
        </div>

        <!-- 视频播放器 -->
        <div v-if="!error" class="video-player-container">
          <video
              ref="videoPlayer"
              :src="fileUrl"
              controls
              preload="metadata"
              width="100%"
              @loadedmetadata="onMetaLoaded"
              @canplay="handleVideoLoaded"
              @canplaythrough="handleVideoLoaded"
              @error="handleVideoError"
          ></video>
        </div>
      </div>
    </div>

    <!-- 不支持文件类型 -->
    <div v-else class="unsupported-type">
      <el-result
          icon="warning"
          title="不支持的文件类型"
          :sub-title="`无法预览 ${fileType} 格式的文件`"
      >
        <template #extra>
          <el-button type="primary" @click="downloadFile">
            <el-icon><Download /></el-icon> 下载文件
          </el-button>
        </template>
      </el-result>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {
  ArrowLeft,
  Download,
  Loading,
  Refresh,
} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();

const loading = ref(true);
const error = ref("");

const fileType = ref("mp4");
const fileTitle = ref("测试视频文件");
const fileTypeText = ref("视频文件");
const fileSize = ref("未知大小");
// 假设视频放在 public/videos/test.mp4
const fileUrl = ref("/pdfjs/test.mp4");

const videoPlayer = ref(null);

const isVideo = computed(() =>
    ["mp4", "webm", "ogg"].includes(fileType.value.toLowerCase())
);

// 返回上一页
const handleBack = () => {
  router.back();
};

// 下载视频
const downloadFile = () => {
  const link = document.createElement("a");
  link.href = fileUrl.value;
  link.download = fileTitle.value;
  link.click();
};

// 重新加载
const reloadVideo = () => {
  loading.value = true;
  error.value = "";
  if (videoPlayer.value) {
    videoPlayer.value.load();
  }
};

// 元数据已加载
const onMetaLoaded = () => {
  // 元数据加载，无需调试输出
};

// 视频可播放
const handleVideoLoaded = () => {
  loading.value = false;
  ElMessage.success("视频加载成功");
};

// 视频加载错误
const handleVideoError = () => {
  loading.value = false;
  error.value = "视频加载失败，请检查路径或格式";
  ElMessage.error(error.value);
};

onMounted(() => {
  const {type, title} = route.query;
  if (type) fileType.value = type;
  if (title) fileTitle.value = title;
});
</script>

<style scoped>
.file-viewer-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.back-button {
  margin-bottom: 20px;
}

.page-header {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2d3d;
  margin-bottom: 8px;
}

.file-meta {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #606266;
}

.video-viewer-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.viewer-controls {
  margin-bottom: 20px;
  padding: 10px;
  background: #f5f7fa;
  border-radius: 6px;
  display: flex;
  gap: 10px;
}

.viewer-content {
  position: relative;
  min-height: 400px;
}

.video-player-container {
  background: black;
  border-radius: 4px;
  overflow: hidden;
}

video {
  width: 100%;
  max-height: 600px;
  background: black;
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: #409eff;
  z-index: 10;
}

.loading-icon {
  font-size: 32px;
  margin-bottom: 10px;
  animation: spin 1s linear infinite;
}

.error-message {
  margin: 20px 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.unsupported-type {
  background: white;
  padding: 40px;
  border-radius: 8px;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-viewer-page {
    padding: 16px;
  }

  .viewer-controls {
    flex-direction: column;
  }

  video {
    max-height: 400px;
  }
}
</style>
